<template>
  <div>
    <!-- 挂号按钮 & 清空按钮 -->
    <el-button type="primary" size="small" style="margin-left: 3px" @click="addNewReg">
      <el-icon>
        <Edit/>
      </el-icon>&nbsp;挂号
    </el-button>
    <el-button type="primary" size="small" style="margin-left: 3px" @click="clear">
      <el-icon>
        <Refresh/>
      </el-icon>&nbsp;清空
    </el-button>

    <br/><br/>
    <div style="font-size: 15px; font-family: 'Microsoft YaHei'">挂号信息</div>&nbsp;

    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">病 历 号 :</span>&nbsp;
          <el-input placeholder="输入病历号" style="width: 110px" again="left" size="small"
                    v-model="formData.casenumber"
                    @blur="blhcx()">
          </el-input>

        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>&nbsp;
          <el-input placeholder="输入姓名" style="width: 110px" again="left" size="small"
                    v-model="formData.realname">
          </el-input>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>&nbsp;
          <el-select placeholder="选择性别" style="width: 110px" size="small" v-model="formData.gender">
            <el-option
                v-for="item in sexData"
                :key="item.id"
                :label="item.constantname"
                :value="item.id">
            </el-option>
          </el-select>

        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:</span>&nbsp;
          <el-input placeholder="输入年龄" style="width: 110px" again="left" size="small" v-model="formData.age">
          </el-input>
          <span style="color:red">*</span>
          <el-select placeholder="选择岁" style="width: 110px" size="small" v-model="formData.agetype">
            <el-option label="岁" value="岁"></el-option>
            <el-option label="月" value="月"></el-option>
            <el-option label="天" value="天"></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="font-size:13px;font-family:'Microsoft YaHei'">出生日期:</span>
          <el-date-picker
              @change="calculateAge"
              v-model="formData.birthdate"
              type="date"
              placeholder="出生日期" size="small" style="width: 124px" value-format="YYYY-MM-DD">
          </el-date-picker>

        </div>
      </el-col>

      <el-col :span="7">
        <div class="grid-content bg-purple">
          <span style="font-size:13px;font-family:'Microsoft YaHei'">身份证号:</span>&nbsp;&nbsp;&nbsp;
          <el-input placeholder="在此输入身份证号" style="width: 230px" size="small"
                    v-model="formData.idnumber"></el-input>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="grid-content bg-purple">
          <span style="font-size:13px;font-family:'Microsoft YaHei'">家庭住址:</span>&nbsp;
          <el-input placeholder="在此输入家庭住址" style="width: 250px" again="left" size="small"
                    v-model="formData.homeaddress">
          </el-input>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">结算类别:</span>&nbsp;
          <el-select placeholder="结算类别" style="width: 100px" size="small" v-model="formData.settleid">
            <el-option
                v-for="item in categories4"
                :key="item.id"
                :label="item.constantname"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">看诊日期:
                        <el-date-picker
                            v-model="formData.visitdate"
                            type="date"
                            placeholder="看诊日期" size="small" style="width: 125px" value-format="YYYY-MM-DD"
                            @change="kzrq_select()">
                        </el-date-picker>

                    </span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">午别:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
          <el-select placeholder="午别" style="width: 90px" size="small" v-model="formData.noon"
                     @change="Noon_select()">
            <el-option
                v-for="item in categories5"
                :key="item.noon"
                :label="item.noon"
                :value="item.noon">
            </el-option>
          </el-select>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">挂号科室:</span>&nbsp;
          <el-select placeholder="挂号科室" style="width: 108px" size="small" v-model="formData.deptid"
                     @change="Dept_select()">
            <el-option
                v-for="item in deptData"
                :key="item.id"
                :label="item.deptname"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>&nbsp;

          <el-select placeholder="号别" style="width: 100px" size="small" v-model="formData.registleid"
                     @change="RegistLe_select()">
            <el-option
                v-for="item in categories6"
                :key="item.id"
                :label="item.constantname"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">看诊医生:</span>
          <el-select placeholder="看诊医生" style="width: 110px" size="small" v-model="formData.userid"
                     @change="user_select()">
            <el-option
                v-for="item in doctorData"
                :key="item.id"
                :label="item.realName"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>

    </el-row>

    <el-row :gutter="2">
      <el-col :span="4">
        <div>

          <span style="font-size:13px;font-family:'Microsoft YaHei'">病历本</span>

          <input type="checkbox" name="" v-model="formData.isbook" true-value="1" false-value="0"
                 @change="book_select()"
          />
        </div>
      </el-col>

      <el-col :span="4">
        <div>
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">应收金额:</span>&nbsp;
          <el-input placeholder="应收金额" style="width: 100px" again="left" size="small" v-model="formData.fee"
                    readonly>
          </el-input>
        </div>
      </el-col>

      <el-col :span="4">
        <div>
          <span style="color:red">*</span>
          <span style="font-size:13px;font-family:'Microsoft YaHei'">收费方式:</span>&nbsp;
          <el-select placeholder="收费方式" style="width: 100px" size="small" v-model="formData.feetype">
            <el-option
                v-for="item in categories3"
                :key="item.id"
                :label="item.constantname"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import {onMounted, ref} from 'vue'
import service from '@/utils/request'
import {useCounterStore} from '@/stores/counter.js'
import {ElMessage} from 'element-plus'

const counter = useCounterStore()
let formData = ref({})
let sexData = ref([])
let deptData = ref([])
let doctorData = ref([])
let categories3 = ref([]) // 收费方式
let categories4 = ref([]) // 结算类别
let categories5 = ref([{noon: '上午'}, {noon: '下午'}]) // 午别
let categories6 = ref([]) // 号别

// 通用加载函数
const loadConstantItem = async (url, targetRef, label) => {
  try {
    const res = await service.get(url)
    if (res.data && res.data.length > 0) {
      targetRef.value = res.data
    } else {
      ElMessage.warning(`${label}数据为空，请检查后台配置`)
    }
  } catch (error) {
    console.error(`${label}加载失败：`, error)
    ElMessage.error(`${label}加载失败，请检查网络或后台服务`)
  }
}

function addNewReg() {
  formData.value.registerid = counter.vo_user.userid
  formData.value.registleid = 1
  formData.value.settleid = 1
  formData.value.isbook = '是'
  formData.value.noon = '上午'
  formData.value.fee = 21

  service.post('/register/add', formData.value)
      .then((res) => {
        if (res && res.data && res.data.success) {
          ElMessage.success('挂号成功！')
          clear()
        } else {
          ElMessage.error(res.data.message || '挂号失败，请重试！')
        }
      })
      .catch((error) => {
        console.error(error)
        ElMessage.error('挂号请求异常，请检查网络或联系管理员。')
      })
}

function clear() {
  formData.value = {}
  doctorData.value = []
}

function Dept_select() {
  service.get('/user/getbydeptid?deptid=' + formData.value.deptid).then((res) => {
    doctorData.value = res.data
    if (!res.data || res.data.length === 0) {
      ElMessage.warning('该科室暂无医生，请选择其他科室')
    }
  }).catch(() => {
    ElMessage.error('医生列表加载失败，请检查网络')
  })
}

function calculateAge() {
  const birthdate = new Date(formData.value.birthdate)
  const today = new Date()
  if (!formData.value.birthdate || birthdate > today) {
    ElMessage.warning('出生日期无效，请重新选择')
    formData.value.age = ''
    formData.value.agetype = ''
    return
  }

  const timeDiff = today - birthdate
  const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))
  const monthsDiff = Math.floor(daysDiff / 30.44)
  let yearsDiff = today.getFullYear() - birthdate.getFullYear()
  const monthCheck = today.getMonth() - birthdate.getMonth()
  if (monthCheck < 0 || (monthCheck === 0 && today.getDate() < birthdate.getDate())) {
    yearsDiff--
  }

  let ageValue, ageType
  if (yearsDiff >= 2) {
    ageValue = yearsDiff
    ageType = '岁'
  } else if (monthsDiff >= 1) {
    ageValue = monthsDiff
    ageType = '个月'
  } else {
    ageValue = daysDiff
    ageType = '天'
  }

  formData.value.age = ageValue
  formData.value.agetype = ageType
}

onMounted(() => {
  loadConstantItem('/constantitem/getbytypeid2?id=7', sexData, '性别')
  loadConstantItem('/constantitem/getbytypeid2?id=5', categories3, '收费方式')
  loadConstantItem('/settlecategory/list',  '结算类别')
  loadConstantItem('/registlevel/list', categories6, '号别')

  service.get('/dept/list')
      .then((res) => {
        if (res.data && res.data.length > 0) {
          deptData.value = res.data
        } else {
          ElMessage.warning('科室数据为空，请联系管理员')
        }
      })
      .catch(() => {
        ElMessage.error('加载科室失败')
      })
})
</script>